<script setup>
import {ref,getCurrentInstance} from 'vue'
import {onShow,onLoad} from '@dcloudio/uni-app'
import {reqAddressList,reqDeleteAddress} from '../../api/address.js'
onShow(async()=>{
	await getAddressList()
})
// 判断是否从下订单页来的标识
let flag = -1
onLoad((optons)=>{
	flag=optons.flag
})
// 存放地址列表
const addressList = ref([])
// 获取所有的地址列表
const getAddressList = async()=>{
	const res = await reqAddressList()
	addressList.value = res.data
	// console.log(res);
}
// 滑动模块的删除选项
let options1 = ref(	
	 [  
		{
			text: '删除',
			style: {
				backgroundColor: '#F56C6C'
			}
		}
	]
)
const {proxy} = getCurrentInstance()
// 删除地址时的方法
const deleteAddress =async(id)=>{
	const modalRes = await proxy.$modal({content:'您确认删除该收货地址吗？'})
	if(modalRes){
	  await	reqDeleteAddress(id)
	  proxy.$toast({title:'收货地址删除成功！'})
	  await getAddressList()
	}
}
// 添加地址的方法
const goAdd = ()=>{
	uni.navigateTo({
		url:'/pagesSetting/address/add/add'
	})
}
//更新地址的方法
const updateAddress =(id)=>{
	// console.log(id);
	uni.navigateTo({
		url:`/pagesSetting/address/add/add?id=${id}`
	})
}
// 对滑块的引用
const swipeAction = ref()
// 点击页面关闭滑块
const closeAllSwipeAction=()=>{
	swipeAction.value.closeAll()
}
// 获取应用，挂载过滤的地址
const app = getApp()
const changeAddress = (addressId)=>{
	if(flag!=='1') return
	const selectAddress = addressList.value.find((item)=>item.id==addressId)
	if(selectAddress){
		app.globalData.address=selectAddress
		uni.navigateBack()
	}	
}
</script>

<template>
	<view class="address-list" @click="closeAllSwipeAction">		
		<scroll-view
		 scroll-y="true" 
		 class="scroll-y"
		 >
		     <uni-swipe-action ref="swipeAction">
		     	<uni-swipe-action-item
		     		:right-options="options1"
					v-for="item in addressList" v-bind:key="item.id"
		     		show="none"
		     		:auto-close="true"
		     		@click="deleteAddress(item.id)"
		     	>
		     		<uni-list>
		     			<uni-list-item >
		     				<template v-slot:header>
		     					<view class="edit-address" @click="changeAddress(item.id)">
		     						<view class="user-phone">
		     							<text class="user-name">{{item.name}}</text>&nbsp;
		     							<text class="phone">{{item.phone}}</text>&nbsp;
		     							<text class="tag" v-if="item.isDefault===1">默认</text>
		     						</view>
		     						<view class="address">
		     							{{item.fullAddress}}
		     						</view>								
		     					</view>							
		     				</template>
		     				<template v-slot:footer>
		     					<view class="edit-btn" @click="updateAddress(item.id)">
		     						<image class="slot-image" src="/static/edit.png" mode="widthFix"></image>
		     					</view>
		     				</template>
		     			</uni-list-item>
		     		</uni-list>
		     	</uni-swipe-action-item>
		     </uni-swipe-action>
		 </scroll-view>
		 <view class="add-address">
		 	<button type="warn" class="add-btn"  @click="goAdd">新增地址</button>
		 </view>
	</view>
</template>

<style lang="scss" scoped>
.address-list{
	padding: 20rpx 20rpx 120rpx 20rpx;
	height: 100vh;
	.scroll-y{
		height: 100%;
		.edit-address{
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			.user-phone{
				margin-bottom: 16rpx;
				.tag{
					color: #f3514f;
					background: #ffdcd8;
				}
			}
		}
		.edit-btn{
			display: flex;
			align-items: center;
			.slot-image{
				width:40rpx;
				height:40rpx;
			}
		}
	}
	.add-address{
		position: fixed;
		left: 50%;
		bottom: 20rpx;
		transform: translateX(-50%);
		text-align: center;
		.add-btn{
			font-size: 26rpx;
			height: 80rpx;
			width: 500rpx;
			border-radius: 50rpx;
			line-height: 80rpx;
		}
	}
}
</style>
